<template>
	<view>
		<view class="header">
			<view class="box">
				<view class="num">{{(rightNum/total *100).toFixed(2)}}%</view>
				<view class="text">正确率</view>
			</view>
		</view>
		<view class="center">
			<view class="text">作答情况</view>
			<view class="box">
				<view class="total">
					<view class="num">{{total}}</view>
					<view class="text">共计</view>
				</view>
				<view class="right">
					<view class="num">{{rightNum}}</view>
					<view class="text">答对</view>
				</view>
				<view class="wrong">
					<view class="num">{{wrongNum}}</view>
					<view class="text">答错</view>
				</view>
			</view>
		</view>
		<button style="color: cornflowerblue;margin-top: 40rpx;" @click="checkParse">查看解析</button>
	</view>
</template>

<script setup>
	import {
		useTestQuestionStore
	} from '@/store';
	import {
		computed
	} from 'vue'

	// 获取仓库数据
	const testQuestionStore = useTestQuestionStore()
	console.log(testQuestionStore.isCorrectList);
	// isCorrectList
	const checkParse = () => {
		testQuestionStore.isReviewing = true
		testQuestionStore.currentQuestionIndex = 0
		uni.navigateTo({
			url: "/pages/test-question/test-question?title=" + encodeURIComponent("题目解析")
		})
	}

	const rightNum = computed(() => {
		return testQuestionStore.isCorrectList.filter(item => item == 1).length
	})
	const wrongNum = computed(() => {
		return testQuestionStore.isCorrectList.filter(item => item == 0).length
	})
	const total = computed(() => {
		return testQuestionStore.isCorrectList.length
	})
</script>

<style lang="scss">
	page {
		background-color: #F8F7FB;
	}

	.center {
		background-color: #fff;
		margin: 30rpx 0;
		padding: 30rpx 20rpx;

		.box {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-around;

			.total,
			.right,
			.wrong {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.num {
					font-weight: 700;
					font-size: 40rpx;
					margin-bottom: 10rpx;
				}

				.text {
					color: grey;
				}
			}

			.total {
				.num {
					color: #000;
				}
			}

			.wrong {
				.num {
					color: red;
				}
			}

			.right {
				.num {
					color: cornflowerblue;
				}
			}
		}

	}

	.header {
		background-color: #fff;
		height: 420rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.box {
			width: 320rpx;
			height: 320rpx;
			border-radius: 50%;
			// border: 2rpx solid #888888;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.num {
				font-size: 46rpx;
			}

			.text {}
		}
	}
</style>